<template>
  <div class="app-container">
    <el-form ref="form" :model="userOrder" :inline="true">
      <el-form-item label="时间">
        <el-date-picker
          v-model="userOrder.selectDate"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"/>
      </el-form-item>
      <el-form-item label="线路名称">
        <el-select v-model="userOrder.driverLine" placeholder="请选择" value="">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"/>
        </el-select>
      </el-form-item>
      <el-form-item label="派车状态">
        <el-select v-model="userOrder.driverLine" placeholder="请选择" value="">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"/>
        </el-select>
      </el-form-item>
      <el-form-item label="订单状态">
        <el-select v-model="userOrder.driverLine" placeholder="请选择" value="">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"/>
        </el-select>
      </el-form-item>
      <el-form-item label="支付状态">
        <el-select v-model="userOrder.driverLine" placeholder="请选择" value="">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"/>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="onSearch">搜索</el-button>
        <el-button type="success" icon="el-icon-refresh" @click="onRefresh">刷新</el-button>
        <el-button icon="el-icon-delete" @click="onCancel">清除</el-button>
      </el-form-item>
    </el-form>
    <el-table
      :data="tableData"
      border
      style="width: 100%">
      <el-table-column
        type="index"
        width="50"/>
      <el-table-column
        width="120"
        prop="date"
        label="创建时间"/>
      <el-table-column
        prop="name"
        label="司机单号"/>
      <el-table-column
        prop="address"
        label="线路"/>
      <el-table-column
        width="120"
        prop="date"
        label="司机姓名"/>
      <el-table-column
        width="120"
        prop="name"
        label="行程状态"/>
      <el-table-column
        prop="address"
        label="乘客上车时间"/>
      <el-table-column
        prop="address"
        label="派车状态"/>
      <el-table-column
        prop="address"
        label="载客数量"/>
    </el-table>
    <div class="block">
      <el-pagination
        :current-page="currentPage4"
        :page-size="20"
        :total="1000"
        background
        layout="total, prev, pager, next"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"/>
    </div>
    <el-table
      :data="tableData"
      border
      style="width: 100%">
      <el-table-column
        width="120"
        prop="date"
        label="创建时间"/>
      <el-table-column
        width="120"
        prop="name"
        label="订单类型"/>
      <el-table-column
        prop="address"
        label="订单号"/>
      <el-table-column
        width="120"
        prop="date"
        label="订单状态"/>
      <el-table-column
        width="120"
        prop="name"
        label="订单金额"
        lable-width="120"/>
      <el-table-column
        prop="address"
        label="线路名称"/>
      <el-table-column
        width="120"
        prop="address"
        label="车票金额"/>
      <el-table-column
        width="120"
        prop="address"
        label="优惠金额"/>
      <el-table-column
        prop="address"
        label="线路名称"/>
      <el-table-column
        prop="address"
        label="起始地址"/>
      <el-table-column
        prop="date"
        label="目的地址"/>
      <el-table-column
        width="120"
        prop="name"
        label="支付状态"/>
      <el-table-column
        width="120"
        prop="address"
        label="支付类型"/>
      <el-table-column
        width="120"
        prop="address"
        label="乘客姓名"/>
      <el-table-column
        prop="address"
        label="用车时间"/>
      <el-table-column
        prop="address"
        label="乘客电话"/>
      <el-table-column
        prop="address"
        label="座位类型"/>
      <el-table-column
        width="120"
        prop="address"
        label="乘客数"/>
      <el-table-column
        prop="address"
        label="司机订单号"/>
      <el-table-column
        width="120"
        prop="address"
        label="车辆型号"/>
      <el-table-column
        prop="address"
        label="车牌号"/>
      <el-table-column
        width="120"
        prop="address"
        label="司机姓名"/>
      <el-table-column
        prop="address"
        label="司机电话"/>
      <el-table-column
        prop="address"
        label="派车时间"/>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userOrder: {
        selectDate: '',
        driverNo: '',
        driverLine: ''
      },
      options: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }],
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }],
      currentPage4: 4
    }
  },
  methods: {
    onSearch() {
      this.$message('submit!')
    },
    onCancel() {
      this.$message({
        message: 'cancel!',
        type: 'warning'
      })
    },
    onRefresh() {
      this.$message('onRefresh!')
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
    }
  }
}
</script>

<style scoped>
  .block{
    text-align: right;
    margin:20px 0;
  }
</style>

